<link rel="stylesheet" href="/assets/css/recharge.css">

<style>
    .title {
        font-size: 1em;
        width: 22% !important;
        white-space: nowrap;
    }

    .money {
        font-size: 1em;
        width: 60% !important;
        float: left !important;
    }

    .btn {
        margin-top: 10px;
    }
</style>

<header class="mui-bar mui-bar-nav" style="position: sticky;">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">返回</h1>
</header>

<form class="mui-input-group" method="post">
    <div class="mui-input-row">
        <label>充值账户：</label>
        <input type="text" readonly value="{$business.mobile}" placeholder="请输入手机号"/>
    </div>

    <div class="mui-input-row">
        <label class="title">当前余额(￥)：</label>
        <input type="number" readonly value="{$business.money}"/>
    </div>

    <div class="mui-input-row">
        <label class="title">充值金额(￥)：</label>
        <input type="number" name="money" min="1" class="mui-input-clear money" placeholder="请输入充值金额" required/>
    </div>

    <div class="mui-input-row">
        <label class="title">支付方式：</label>
        <select name="paytype">
            <option value="0">微信支付</option>
            <option value="1">支付宝支付</option>
        </select>
    </div>

    <!--立即充值-->
    <button type="submit" class="mui-btn mui-btn-primary mui-btn-outlined">立即充值</button>
</form>

<script>
    //选择金额，改变所选金额样式
    $(".money").click(
        function () {
            $(".money_box input").css("border", "1px solid #ccc");
            $(this).addClass("choose").siblings().removeClass("choose");
            $(".setmeal_box").hide();
        }
    )
    //选择其他金额，显示金额输入框
    $(".money_box input").click(
        function () {
            $(this).css("border", "1px solid #01aff0");
            $(this).siblings().removeClass("choose");
            $(".setmeal_box").show();
            $(".money_box input").show();
        }
    )
</script>